<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#slide_down").click(function(){
			$(".panel").slideDown("slow");
		});
		$("#slide_up").click(function(){
			$(".panel").slideUp("slow");
		});
		$("#slide_toggle").click(function(){
			$(".panel").slideToggle("slow");
		});
	});
</script>

<style type="text/css">
div.panel,p.flip
{
	margin:0px;
	padding:5px;
	text-align:center;
	background:#e5eecc;
	border:solid 1px #c3c3c3;
}
div.panel
{
	height:120px;
	display:none;
}
</style>
<title>Slide Down and Slide Up</title>
</head>
<body>
<div class="panel">
<p>Slide Text</p>
</div>
<p id="slide_down" class="flip">Click here to slide down</p>
<p id="slide_up" class="flip">Click here to slide up</p>
<p id="slide_toggle" class="flip">Click here to slide toggle</p>
</body>
</html>